<script setup>
import { ref } from 'vue'
import { onLaunch, onShow, onLoad } from '@dcloudio/uni-app'
//引入API

//引入子组件

//引入props

//引入store
import { useMemberStore } from '@/store'
const memberStore = useMemberStore()
//请求数据初始化页面
const profile = ref({})
onLoad(async () => {
  await memberStore.getProfile()
  profile.value = memberStore.profile
})

const handleProfileClick = () => {
  uni.navigateTo({
    url: '/pages/member/index',
  })
}

const handleSettingsClick = () => {
  uni.navigateTo({
    url: '/pages/settings/index',
  })
}

const handleLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}
</script>

<template>
  <view class="profile-container">
    <view v-if="profile">
      <view class="profile-info" @tap="handleProfileClick">
        <image :src="profile.avatar" mode="scaleToFill" class="avatar" />
        <text class="nickname">{{ profile.nickname }}</text>
        <view class="change-profile">更换头像昵称</view>
      </view>
      <view class="settings" @tap="handleSettingsClick">
        <text>设置</text>
      </view>
    </view>
    <view v-else>
      <button class="login-btn" @tap="handleLogin">立即登录</button>
    </view>
  </view>
</template>

<style lang="scss">
.profile-container {
  padding: 20rpx;
  background-color: #e8f5e9; // 添加浅绿色背景

  .profile-info {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .nickname {
      font-size: 32rpx;
      color: #333;
      flex: 1;
    }

    .change-profile {
      font-size: 28rpx;
      color: #27ba9b;
    }
  }

  .settings {
    padding: 20rpx;
    font-size: 32rpx;
    color: #333;
  }
}

.login-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #27ba9b;
  color: #fff;
  border-radius: 10rpx;
  margin-top: 40rpx;
}
</style>
